<style lang="scss" scoped>
</style>

<template>
  <common-page-template
    v-bind="pageData"
    :columns="columns"
    @page-change="pageChange"
  >
    <template #search>
      <role-search @submit="handleSubmit" />
    </template>
    <template #btns>
      <el-button @click="showModal" type="primary">新增</el-button>
      <!-- <el-button type="danger">删除</el-button> -->
    </template>
    <add-role-modal
      width="700px"
      :title="optType === 'add' ? '新增角色' : '编辑角色'"
      :type="optType"
      :curForm="curForm"
      v-model:show="showAddModal"
      @success="handleSubmit"
    />
  </common-page-template>
</template>

<script setup>
import { ref, h, onMounted } from "vue";
import RoleSearch from "./component/roleSearch.vue";
import AddRoleModal from "./component/AddRoleModal.vue";
import CommonOptionBtns from "@/components/commonOptionBtns.vue";
import { RoleQueryListPage, RoleDelete } from "@/apis/role";
import CommonStatus from '@/components/commonStatus.vue'
import { ElMessage } from "element-plus";
import { RoleStatusMap } from '@/enums/index'
import { formateTime } from '@/utils/time'
const showAddModal = ref(false);
import usePage from "@/hooks/usePage";
const { pageData, handleQuery, pageChange } = usePage(
  RoleQueryListPage,
  "records"
);
const optType = ref("add");
const curForm = ref("");
const columns = [
  // { type: "selection", width: "55" },
  {
    prop: "id",
    label: "角色ID",
    minWidth: 100,
    align: "center",
  },
  {
    prop: "rname",
    label: "角色名称",
    minWidth: 120,
    align: "center",
  },
  {
    prop: "description",
    label: "角色描述",
    minWidth: 120,
    align: "center",
  },
  {
    prop: "type",
    label: "角色类型",
    minWidth: 120,
    align: "center",
  },
  {
    prop: "state",
    label: "状态",
    minWidth: 120,
    align: "center",
    render: (row) => {
        return h(CommonStatus, { ...(RoleStatusMap[row.state] || {})})
    }
  },
  {
    prop: "createdTime",
    label: "创建时间",
    minWidth: 150,
    align: "center",
    render: (row) => {
        return h('span', formateTime(row.createdTime))
    },
  },
  {
    label: "操作",
    minWidth: 120,
    align: "center",
    render: (row, column, $index) => {
      return h(CommonOptionBtns, {
        btnList: [
          { type: "primary", size: "small", text: "编辑", eventName: "edit" },
          {
            type: "info",
            size: "small",
            text: "删除",
            eventName: "del",
            prop: { title: "确认删除该角色?" },
          },
        ],
        onBtnClick: (eventName) => {
          if (eventName === "edit") {
            // 编辑
            showModal("edit", row);
          }
          if (eventName === "del") {
            console.log("eventName: ", eventName);
            RoleDelete(row.id).then(() => {
              ElMessage({
                message: "删除成功",
                type: "success",
              });
              handleSubmit();
            });
          }
        },
      });
    },
  },
];
const handleSubmit = (formData) => {
  pageData.formData = formData;
  console.log("formData: ", formData);
  handleQuery();
};
onMounted(() => {
  handleQuery();
});
const showModal = (type, forms = "") => {
  optType.value = type;
  showAddModal.value = true;
  curForm.value = forms;
};
</script>

